<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innisfree官方网站</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/typepage.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="icon" href="./img/OIP-C.jpg">
</head>

<body>
    <!-- 顶部 -->
    <header>
        <div class="w">
            <a href="#" style="padding:0px 10px"><img src="img/logo_2ebdcae.png" alt="" style="width:164px"></a>
            <div class="login">
                Hey,&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;<span style="color: gray;">注册</span>
                <p class="down">
                    <span>Hey</span>
                    <a href="login.html" class="dl">登陆</a>
                    <a href="register.html" class="zc">注册</a>
                    <a href="#" class="address">附近暂无门店</a>
                </p>
            </div>
            <input type="text" class="txt1" placeholder="第四代小黑瓶">
            <img src="img/www.innisfree.cn_(1)fdj_03.png" alt="" class="small" style="width:24px">
            <ul>
                <li><a href="listpage.html">购物</a></li>
                <li><a href="#">热门活动</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
            <div class="box1">
                <div class="inside">
                    <h5>热门搜索</h5>
                    <ul class="ul2">
                        <li><a href="#" style="width:90px;display:block;">第四代小绿瓶</a></li>
                        <li><a href="#" style="margin-left:15px;">小绿瓶</a></li>
                        <li><a href="#">限定散粉</a></li>
                        <li><a href="#">007精华</a></li>
                    </ul>
                    <ol>
                        <li><a href="#" style="width:70px;">美白橘光瓶</a></li>
                        <li><a href="#">面膜</a></li>
                        <li><a href="#">洁面</a></li>
                        <li><a href="#">红茶</a></li>
                        <li><a href="#">蓝莓</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </header>
    <!-- 底部 -->
    <main>
        <div class="w">
            <h2><img src="img/00e581b5d605f1370e5152e59d (1).jpg" alt=""></h2>
            <div class="gdlist">
                <!-- <div class="names">
                    <span></span>
                </div>
                <div class="floor1">
                    <a href="#" class="a1"><img src="img/small1.jpg" alt="" style="width:190px;"></a>
                    <p style="font-size: 13px;margin-top:15px;"><a href="#" style="color:#000;">蓝莓平衡保湿套装Superfood
                        </a></p>
                    <div class="price"><span style="font-size:12px">￥</span>60</div>
                </div> -->
            </div>
        </div>

    </main>
    <footer>
        <div class="w">
            <div class="box">
                <div class="footer_1">
                    <div class="qqq">
                        <img src="./footer.images/logo_white_56c6462.png" alt="">
                    </div>

                    <div class="footer_1_f1">
                        <a href="#"><img src="./footer.images/weibo_74219f1.png" alt=""></a>
                        <a href="#"><img src="./footer.images/1.png" alt=""></a>
                        <img src="./footer.images/2.png" alt="">
                        <div>
                            <p>专卖店导航</p>
                            <p>探店指南</p>
                        </div>
                    </div>
                    <div class="code">
                        <div class="code_left">
                            <img src="./footer.images/copyright_d57b29a.png" alt="">
                        </div>
                        <div class="code_right">
                            <!-- <img src="./footer.images/K]QGNZA1${9~%SOF[8SC)H4.png" alt=""> -->
                            <p style="width:300px;padding-left: 10px;">copyright@2011 amorerepacific corporation.</p>
                            <p style="padding-left: 10px;">All rights reserved</p>
                        </div>

                    </div>
                </div>

                <div class="footer_2">
                    <div class="footer_2_top">

                    </div>
                    <div class="footer_2_bottom">
                        <figure style="text-align:center;margin-left:15px;"><img src="./footer.images/q1.png" alt=""
                                style="width: 72px;height:72px;padding-left: 8px;">
                            <p>Innisfree公众号</p>
                        </figure>
                        <figure style="text-align:center;margin-left:20px"><img src="./footer.images/q2.png" alt="">
                            <p>Innisfree商城小程序</p>
                        </figure>
                    </div>

                </div>

                <div class="footer_3">
                    <div class="lianxi">联系我们</div>
                    <p>服务热线：400-920-9238</p>
                    <p>服务时间：09:00-21:00 （不含国定假日）</p>
                    <p>客服邮箱：innisfree@innisfree.cn</p>

                    <p style="padding-top:30px;"><a href="#"><img src="./footer.images/gongan_caf441d.png" alt=""
                                style="padding-right: 20px;"></a> <span>公网安备312102451578</span></p>

                </div>

                <div class="footer_4">
                    <ul>
                        <a href="#">
                            <li id="huiyuan">会员中心</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">加入会员</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">会员制度</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">我的主页</li>
                        </a>
                    </ul>
                </div>

                <div class="footer_5">
                    <ul>
                        <a href="#">
                            <li id="huiyuan">客服中心</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">公告板</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">使用说明</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">FAQ</li>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!-- 回顶 -->
    <div id="backtop">
        <img src="img/icon_top_b872f90.png" alt="">
    </div>
    <!-- 客服 -->
    <a href="" class="service">
        <img src="img/icon_serve_0c1ed9a.png" alt="">
    </a>
</body>

</html>
<script src="js/jquery.min.js"></script>
<script>
    $(window).on("scroll", function () {
        if ($(window).scrollTop() > 250) {
            $("#backtop").fadeIn(1000)
        } else {
            $("#backtop").fadeOut(1000)
        }
    })
    $("#backtop").on("click", function () {
        $("html,body").animate({
            scrollTop: 0
        }, 1000)
    })

    $(".login").hover(function () {
        $(".down").stop().slideToggle(300);
    })
    $(".txt1").on("focus", function () {
        $(".box1").css('display', 'block')
    })
    $(".txt1").on("blur", function () {
        $(".box1").css('display', 'none')
    })
    window.addEventListener("scroll", () => {
        let header = document.querySelector("header");
        header.classList.toggle("sticky", window.scrollY > 0);
    })

</script>
<!-- render -->
<script>
    $(function () {
        getData();
        getGoodsType()
    })
    function getData() {
        $.get('./goodsAndShoppingCart/getGoodsList.php', { 'typeId': '004' }, function (data) {
            console.log(JSON.parse(data));
            let arr = JSON.parse(data);
            let str = ''
            arr.forEach((item, index) => {
                str += ` <div class="names">
                    <span>${item.goodsType}</span>
                </div>
                <div class="floor1" goodsId="${item.goodsId}">
                    <a href="#" class="a1"><img src="${item.goodsImg}" alt="" style="width:190px;"></a>
                    <p style="font-size: 13px;margin-top:15px;"><a href="#" style="color:#000;">${item.goodsName}
                        </a></p>
                    <div class="price"><span style="font-size:12px">￥</span>${item.goodsPrice}</div>
                </div> 
               `
            })
            $('.gdlist').html(str)
        })
    }
    $(function () {
        getGoodsType()
    })
    function getGoodsType() {
        $.get("./goodsAndShoppingCart/getGoodsType.php", { 'typeId': '004' }, function (data) {
            console.log(data);
            data.forEach(function (item, index) {
                $(".names>span").eq(index).html(item.goodsType)
            })
        }, "json")
    }

</script>
<script>
    $('.gdlist').on('click', '.floor1', function () {
        console.log($(this).attr('goodsId'));
        // console.log(e.target);

        let id = $(this).attr('goodsId');
        location.href = './detailpage.html?good=' + id;
    })
    console.log(location.search);
</script>